<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../commonjs/vue.js"></script>
</head>
<body>
<div id="root">
    <form action="">
        账号: <input type="text" v-model.trim="account"><br><br><!--.trim删除前后输入的空格-->
        密码: <input type="password" v-model.trim="password"><br><br><!--.trim删除前后输入的空格-->
        性别: 男<input type="radio" v-model="sex" value="male"> 女:<input type="radio" v-model="sex" value="female"><br><br>
        年龄:<input type="number" v-model.number="age"><br><br><!--.number控制年龄提交时一定是数字-->
        爱好:学习<input type="checkbox" v-model="hobby" value="study">
        打球<input type="checkbox" v-model="hobby" value="basketball">
        编程<input type="checkbox" v-model="hobby" value="programming"><br><br>
        校区:<select v-model="city">
        <option value="default">请选择校区</option>
        <option value="beijng">北京</option>
        <option value="shanghai">上海</option>
        <option value="shenzhen1">深圳</option>
    </select><br><br>
        其他信息:<textarea v-model.lazy="other"></textarea><br><br><!--.lazy懒加载 文本域失去焦点再收集数据-->
        <input type="checkbox" v-model="agree">阅读并同意 <a href="">《用户使用协议》</a>
        <button @click.prevent="submitVal">提交</button>
    </form>
</div>
<script>
    Vue.config.productionTip = false;//关闭开发提示
    const vm = new Vue({
        el: '#root',
        data: {
            account:'',
            password:'',
            sex:'male',
            age:0,
            hobby:[],
            city:'default',
            other:'',
            agree:false
        },
        methods: {
            submitVal(){
                console.log(vm.$data)
            }
        }
    })
</script>
</body>
</html>